<template>
  <div
    class="signature-box"
    :style="boxStyle"
    @click="handleDblClick"
    :class="{
       'is-initiator': signerInfo.boxType > 4&& !hasValue, 
       'is-requir_initiator': signerInfo.required&&signerInfo.boxType > 4&& !hasValue
     }"
  >
      <div style="width: 100%; height: 100%;">
        <!-- boxType 为 4, 8，显示 checkbox -->
        <div v-if="showCheckbox" class="placeholder">
            
           <img
              v-if="signerInfo.fieldValue && signerInfo.fieldValue.length > 5"
              :src="signerInfo.fieldValue"
              style="width:16px;object-fit:contain"
              class="checkImg"
            >
            <ToggleRadio v-else v-model="signerInfo.fieldValue" :disabled="mode === 'viewStatus' || (signerInfo.userList && signerInfo.userList.length > 0)" />
        </div>
        
        <!-- boxType 非 4 8，显示填写结果或占位符 -->
        <div v-else class="placeholder">

         <!-- 已填写内容并且不是勾选 -->
          <template v-if="hasValue && !showCheckbox">
            <span v-if="!isImageType" v-html="signerInfo.fieldValue" />
            <img v-else :src="signerInfo.fieldValue" alt="签名">
          </template>

          <!-- 未填写并且不是勾选：显示图标 + 描述 -->
          <template v-else>
            <span class="placeholderText">
              <u-icon :name="iconClass[signerInfo.boxType]" :size="24"></u-icon>
                {{ signerInfo.describe }}
            </span>
          </template>

          <!-- 签署人姓名（仅在特定模式） -->
          <p v-if="showSignerName && shouldShowSignerLabel" class="signer-label">
            {{ signerLabel }}
          </p>
        </div>
      </div>
  </div>
</template>

<script>
import ToggleRadio from '@/pages/petition/common/typeComs/SignatureCheckbox.vue'
export default {
  name: 'SignatureOverlay',
  components: {
    ToggleRadio,
  },
  props: {
    mode: {
      type: String,
      default: 'viewStatus' // 四种状态分别是 创建 设置 签署 预览 // 'addStatus' 'setStatus' 'signStatus' 'viewStatus'
    },
    signerInfo: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      style: { },
    }
  },
  computed: {
  // 图标映射
    iconClass() {
      return {
        1: 'edit-pen',
        2: 'more-circle',
        5: 'edit-pen',
        6: 'more-circle',
        7: 'clock',
        8: 'checkmark'
      }
    },

    // 是否有值
    hasValue() {
      return !!this.signerInfo.fieldValue
    },

    // 是否为图片类型
    isImageType() {
      return [1, 5].includes(this.signerInfo.boxType)
    },

    // 是否显示勾选框
    showCheckbox() {
      return [4, 8].includes(this.signerInfo.boxType)
    },
    // 是否有签署人姓名
    showSignerName() {
      return (this.signerInfo.selectNames && this.signerInfo.selectNames.length) || this.signerInfo.nickName
    },

    // 是否应显示签署人标签
    shouldShowSignerLabel() {
      // 在设置签呈人 和 预览模式下并且不是发起人类型 同时没有值 才显示签呈人标签
      return ['setStatus', 'viewStatus'].includes(this.mode) && this.signerInfo.boxType < 5 && !this.signerInfo.fieldValue
    },

    // 签署人标签文本
    signerLabel() {
      const { selectNames, nickName } = this.signerInfo
      if (selectNames?.length) {
        return selectNames.length > 1
          ? `(${selectNames[0]} 等${selectNames.length}人)`
          : `(${selectNames[0]})`
      }
      return `(${nickName})`
    },

    boxStyle() {
      const showBorderAndBack = !this.signerInfo.fieldValue
      // 如果没有值 就显示边框和背景

      // 是否必填 必填项背景和边框为红色
      const isRequiredEmpty = this.signerInfo.required
      let borderStyle = ''
      let backgroundStyle = ''
      if (showBorderAndBack) {
        borderStyle = isRequiredEmpty ? '1px solid #dc3f3f9e' : '1px solid #3381d2'
        backgroundStyle = isRequiredEmpty ? '#d838388f' : '#409eff63'
      } else {
        borderStyle = 'none'
        backgroundStyle = 'transparent'
      }
      return {
        position: 'absolute', 
        top: this.style.positionY + 'px',
        left: this.style.positionX + 'px',
        width: this.style.boxWidth + 'px',
        height: this.style.boxHeight + 'px',
        border: borderStyle,
        backgroundColor: backgroundStyle,
        cursor: this.mode === 'addStatus' ? (this.dragging ? 'grabbing' : 'move') : '',
        zIndex: 9
      }
    }
  },
  watch: {
    signerInfo: {
      handler(val) {
        this.style = {
          boxWidth: val.boxWidth,
          boxHeight: val.boxHeight,
          positionY: val.positionY,
          positionX: val.positionX
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleDblClick() {
      const { mode, signerInfo } = this
      const userSign = signerInfo.userList?.[0]
      const signatureCompleted = userSign?.signatureState === 5

      // 签字模式
      if (mode === 'signStatus') {
        if (!signatureCompleted) {
          // 如果不等于5 代表签字未完成 触发点击 允许签字
          this.$emit('signatureClick')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.signature-box {
  box-sizing: border-box;
  user-select: none;
  position: absolute;
  &.is-initiator {
     /* 发起人类型 不必填样式 */
    border: 2px dashed #ff9800 !important;   // 橙色虚线边框
    background-color: #fff3e0 !important;    // 淡橙色背景
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);

    .placeholderText i {
      color: #ff9800; // 图标橙色
    }

    p.signer-label {
      color: #e65100; // 签署人标签深橙色
      font-weight: bold;
    }
  }
  &.is-requir_initiator{
    /* 发起人类型 必填样式 */
     border: 2px dashed #ff9800 !important;   // 橙色虚线边框
     background-color: #e2948091 !important;    // 淡橙色背景
     box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
  }
}

.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  font-weight: bold;
  color: #666;
  box-sizing: border-box;
  padding: 3px;
  font-size: 14px;
  img{
    /* width: 100%; */
    height: 100%;
    display: block;
    /* object-fit: contain; */
  }
  .checkImg{
    width:16px;
    object-fit:contain;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  P{
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 12px;
  }
  .placeholderText{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  span{
    font-family: 'Roboto', sans-serif;
    white-space: break-spaces;
    line-height: 1.5;
    word-break: break-all;
  }
}

</style>
